@extends('layouts.app')

@section('content')
<div class="col-md-10 col-md-offset-1">
<div class="col-md-7">
	<div class="panel panel-default">
	  <div class="panel-heading">个人资料</div>
	  <div class="panel-body" style="width:300px;">
		邮箱：{{$user->email}}
		<br />
		账号：{{$user->name}}
		<br />
		简介：{{$user->phrase}}
		<br />
		注册时间：{{$user->created_at}}
	  </div>
		<div class="ibox-content" style="position:absolute;right:20px;top:47px;" >
			<div id="crop-avatar">
				<div class="avatar-view" title="Change Logo Picture">
			    	<a href="#"><img id="img1" src="img/{{Auth::user()->img}}" class="img-circle" width="100" height="100" alt="头像" data-toggle="modal" data-target="#myModal" /></a>
			    </div>
			</div>
		</div>
	  
	</div>
	<a href="{{route('user.edit')}}" class="btn btn-primary">修改</a>
</div>
<div class="col-md-5">
	<div class="panel panel-default">
	  <div class="panel-heading">群组</div>
	  <div class="panel-body">

	  </div>
	</div>
	<div class="panel panel-default">
	  <div class="panel-heading">权限</div>
	  <div class="panel-body">

	  </div>
	</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改头像</h4>
      </div>
      <form action="{{route('user.upload')}}" method="POST" enctype ="multipart/form-data" id="user_form">
      <div class="modal-body">
      {!! csrf_field() !!}
      <img id="img" width="150" height="150" src="img/{{Auth::user()->img}}" class="img-circle" style="margin-left:60px;" />
      <input type="file" name="user_image" value="" class="file-loading" id="file" style="margin-left:30px;margin-top:20px;" />
      <br />
      </div>
      </form>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">关闭</button>
        <button id="postimage" type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div> 

<script type="text/javascript">
$("#postimage").click(function(){
	var fileObjs = document.getElementById("file").files;
    var fileObj = fileObjs[0];
    var ftype = fileObj.type;
    var fsize = fileObj.size;
    var arr = ftype.split("/");
    var arrs = ["jpeg", "png", "gif"];
    if($.inArray(arr[1], arrs) < 0){
    	alert("此图片格式不正确");
    	return false;
    }
    if(fsize > 204800){
    	alert("图片大小超过200KB,请压缩");
    	return false;
    }
    var FileController = "{{route('user.upload')}}";
    var form = new FormData();
    form.append('file', fileObj);
    form.append('_token', $("input[name=_token]").val());
    var xhr = new XMLHttpRequest();
    xhr.open('post',FileController,false);
    xhr.send(form);
    console.log('状态码是' + xhr.readyState);
    if(xhr.readyState === 4){
    	alert('修改成功');
    	$("#closemodal").click();
    	changeImg(fileObj, "#img1");
    	//Todo 刷新头像
    }else{
    	alert('貌似出了点问题，请改正或稍后上传');
    }
});

$(function() {
  $('#file').change(function(event) {
    // 根据这个 <input> 获取文件的 HTML5 js 对象
    var files = event.target.files, file;		
    if (files && files.length > 0) {
      // 获取目前上传的文件
      file = files[0];
      // 来在控制台看看到底这个对象是什么
      // console.log(file);
      // 那么我们可以做一下诸如文件大小校验的动作
      if(file.size > 204800) {
        alert('图片大小不能超过 200KB!');
        return false;
      }
      // !!!!!!
      changeImg(file,"#img");
    }
  });
});

function changeImg(file,elm) {
	   var URL = window.URL || window.webkitURL;
      // 通过 file 生成目标 url
      var imgURL = URL.createObjectURL(file);
      // 用这个 URL 产生一个 <img> 将其显示出来
      $(elm).attr('src', imgURL);
}
</script>
@endsection


